<template>
    <div id="box">
        <div id="head">
        <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="onClickLeft" />
      </div>
        <div id="little_box">
            <van-list>
                <van-card v-for="item in list" :key="item" :price="item.price" :title="item.name" :thumb="item.picture"
                    @click="tiaozhuan(item.id)" :num="item.stock" />
                
                
            </van-list>
            <button @click="getData()" style="width: 100%;">加载更多</button>
        </div>
    </div>
</template>

<style scoped>
#box {
    height: 100%;
    padding-bottom: 50px;
}

#box #little_box {
    height: 100%;
    overflow-y: auto;
}

</style>

<script setup>
import { onMounted, ref } from 'vue';
import request from '../request/request';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
const router = useRouter();
const list = ref([])
const props = defineProps({
    id: Number,
})
const is_last = ref(false)
const last_id = ref(0)
onMounted(() => {
    getData()
})

const getData = () => {
    request({
        url: '/home/goods/list',
        method: 'get',
        params: {
            pagesize: 4,
            category_id: props.id,
            last_id: last_id.value
        }
    }).then(res => {
        // console.log(res);
        // list.value.push(...res);
        // console.log(list.value);
        
        // console.log(list);
        // console.log(last_id.value, '111');
        const data = res;
        if (data.length > 0) {
            list.value = list.value.concat(data)
            last_id.value = res[res.length - 1].id
        }  else if (list.value > 0) {
            showToast({
                message:'已经到达底部',
                type:'fail'
            })
            is_last.value = true
        } else {
            showToast({
                message:'列表为空',
                type:'fail'
            })
        }
    })
    // .catch(err => {
    //     console.log(err);
    //     console.log('失败');

    // })
}

const tiaozhuan = (id) => {
    console.log(id);
    router.push({
        name: 'goods',
        params: { detailiId: id }
    })

}
const onClickLeft = () => {
    history.back()
}

</script>